<template>
  <div class="xuan">
    <ul>
      <li :class="{ to_active: shows == 1 }" @click="today_a">首页</li>
      <li :class="{ to_active: shows == 2 }" @click="today_b">8H秒杀日</li>
      <li :class="{ to_active: shows == 3 }" @click="today_c">大家电</li>
      <li :class="{ to_active: shows == 4 }" @click="today_d">智能数码</li>
      <li :class="{ to_active: shows == 5 }" @click="today_e">运动出行</li>
      <li :class="{ to_active: shows == 6 }" @click="today_f">服饰穿戴</li>
    </ul>
    <keep-alive>
      <component :is="com"></component>
    </keep-alive>
  </div>
</template>

<script>
import Demoa from "../../dtzj/Demoa.vue";
import Demob from "../../dtzj/Demob.vue";
import Democ from "../../dtzj/Democ.vue";
import Demod from "../../dtzj/Demod.vue";
export default {
  data() {
    return {
      com: "Demoa",
      shows: 1,
    };
  },
  components: {
    Demoa,
    Demob,
    Democ,
    Demod,
  },
  methods: {
    today_a() {
      this.com = "Demoa";
      this.shows = 1;
    },
    today_b() {
      this.com = "Demob";
      this.shows = 2;
    },
    today_c() {
      this.com = "Democ";
      this.shows = 3;
    },
    today_d() {
      this.shows = 4;
    },
    today_e() {
      this.shows = 5;
    },
    today_f() {
      this.shows = 6;
    },
  },
};
</script>

<style scoped>
/* .xuan{
 
} */
ul {
  width: 100%;
  display: block;
  display: flex;
  height: 0.52rem;
  text-align: center;
  overflow-x: auto;
  white-space: nowrap;
  color: white;
  font-size: 0.16rem;
  background-color: #ff3363;
}
ul::-webkit-scrollbar {
  display: none;
}
li {
  line-height: 0.52rem;
  margin: 0 0.18rem;
}
.xuan {
  margin-top: 0.36rem;
}
.to_active {
  border-bottom: 0.02rem solid white;
  color: white;
}
</style>